<template>
  <div class="mine-container">
    <div class="header">
      <div class="header-content" v-if="userInfo">
        <div class="header-content-left">
          <img :src="userInfo.header" alt="" class="">
          <span>{{ userInfo.name }}</span>
        </div>
        <div>
          <el-button round type="primary" @click="goPersonCenter">个人中心</el-button>
        </div>
      </div>
    </div>
    <div class="mine-content">
      <div class="mine-content-left">
        <div class="mine-content-left-top">
          <div class="mine-content-left-top-item" v-for="(item, index) in leftTopItems"
               :class="{ active: leftSelectIndex == index }" :key="index" @click="toggleIndex(index)">
            <img v-if="leftSelectIndex == index" :src="item.img1" alt="" class="mine-content-left-top-item-img">
            <img v-else :src="item.img" alt="" class="mine-content-left-top-item-img mine-content-left-top-item-img-media">
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="mine-content-left-bottom">
          <div v-for="(item, index) in leftbottomItems" :key="index" class="mine-content-left-bottom-item"
               @click="toggleLeftBottom(item, index)">
            <img :src="item.img" alt="" class="mine-content-left-bottom-item-img">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="mine-content-right">
        <component :is="tabs[leftSelectIndex]"></component>
      </div>
    </div>
  </div>
</template>
<script setup>
import useUserStore from '@/stores/user.js'
import {useRouter, useRoute} from 'vue-router';
import course_icon from '@/assets/images/course_icon.svg'
import calendar_icon from '@/assets/images/calendar_icon.svg'
import question_icon from '@/assets/images/question_icon.svg'
import listen_icon from '@/assets/images/listen_icon.svg'
import course_icon1 from '@/assets/images/course_icon1.svg'
import calendar_icon1 from '@/assets/images/calendar_icon1.svg'
import question_icon1 from '@/assets/images/question_icon1.svg'
import listen_icon1 from '@/assets/images/listen_icon1.svg'

import note_icon from '@/assets/images/note_icon.svg'
import resource_icon from '@/assets/images/resource_icon.svg'
import xieyi_icon from '@/assets/images/xieyi_icon.png'
import agreement_icon from '@/assets/images/agreement_icon.png'
import MyCourse from '@/views/mine/components/MyCourse.vue';
import LiveCalendar from "@/views/mine/components/LiveCalendar.vue";
import MyBank from "@/views/mine/components/MyBank.vue";
import ListenRecord from "@/views/mine/components/ListenRecord.vue";
import Pk from "@/views/mine/components/Pk.vue";
import QuestionApis from '@/apis/question.js'
import HomeApis from "@/apis/home.js";
import useLocalStore from "@/stores/local.js";
import {ElMessage} from "element-plus";
import VideoApis from "@/apis/video.js"


const localStore = useLocalStore()
const route = useRoute()
const userStore = useUserStore()
const router = useRouter();
let userInfo = computed(() => {
  return userStore.userInfo;
});


const tabs = ref([MyCourse, LiveCalendar, MyBank, ListenRecord,Pk])
// const tabs = ref([MyCourse, LiveCalendar, MyBank, ListenRecord])

const leftTopItems = ref([
  {name: '我的课程', img: course_icon,img1: course_icon1},
  {name: '直播日历', img: calendar_icon,img1: calendar_icon1},
  {name: '我的题库', img: question_icon,img1: question_icon1},
  {name: '听课记录', img: listen_icon,img1: listen_icon1},
  {name: '真人pk', img: listen_icon,img1: listen_icon1},
])
const leftbottomItems = ref([
  {name: '笔记', img: note_icon},
  {name: '资料', img: resource_icon},
  {name: '讲义下载', img: xieyi_icon},
  {name: '我的协议', img: agreement_icon},
])

const leftSelectIndex = ref(0)

function toggleIndex(index) {
  if (leftSelectIndex.value == index) {
    return;
  }
  leftSelectIndex.value = index
//   router.
  router.replace({
    query: {
      index: index
    }
  })
}

function goPersonCenter() {
  router.push('/mine/userInfo')
}

function init() {
  if (route.query.index) {
    leftSelectIndex.value = Number(route.query.index)
  }

}

async function toggleLeftBottom(item, index) {
  if (index == 0) {
    if (!userStore.selectCategory) {
      const res = await HomeApis.currentChoose()
      userStore.setSelectCategory(res.data)
      // selectCategory.value = [
      //   res.data.industryCode,
      //   res.data.examId,
      //   res.data.categoryId,
      // ];
    }
    router.push('/questionBank/note/index?categoryId='+userStore.selectCategory.categoryId)
  }else if(index == 1){
    router.push({
      path:"/mine/material"
    })
  }else if(index == 2){
  //
    if(leftSelectIndex.value ==0 ){
      ElMessage({
        message: '请选择课程视频以下载',
        type:'warning'
      })
    }else{
      leftSelectIndex.value = 0
      router.replace({
        query: {
          index: 0
        }
      })
    }
  }else if(index == 3){
    ElMessage({
      message:"功能开发中",
      type:'warning'
    })
  }
}

init()
</script>
<style scoped>
@media screen and (min-width: 1400px) {
  .mine-container .header-content{
    width: 1400px;
  }
  .mine-content{
    width: 1400px;
  }
  .mine-content-left-top-item{
    font-size: 18px;
  }
}

@media screen and (max-width: 1200px) {
  .mine-content-left-top-item{
    font-size: 12px;
  }
  .mine-content-left-top-item-img{
    width: 20px;
    height: 20px;
  }
}
@media screen and (min-width: 1200px){
  .mine-content-left-top-item-img.mine-content-left-top-item-img-media{
    width: 24px;
    height: 24px;
  }
}
@media screen and (min-width: 1200px) and  (max-width: 1400px){
  .mine-content-left-top-item{
    font-size: 16px;
  }
}




.mine-container .header {
  box-sizing: content-box;
  height: 66px;
  background: white;
  padding: 20px 0;
}

.mine-container .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.mine-container .header-content-left {
  display: flex;
  align-items: center;
}

.mine-container .header-content-left img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin-right: 21px;
}

.mine-content {
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: start;
  gap: 22px;
}

.mine-content-left {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 210px;

}

.mine-content-left-top {
  height: 212px;
  box-sizing: border-box;
  padding: 20px 16px;
  border-radius: 12px;
  background: white;
  justify-content: space-between;
  display: flex;

  flex-direction: column;
}

.mine-content-left-top-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  padding-left: 16px;
  color: #333;
  font-weight: 400;
  cursor: pointer;
}

.mine-content-left-top-item:hover {
  background: #F8FBF8;
}

.mine-content-left-top-item.active {
  color: #3C6CFF;

}


.mine-content-left-bottom {
  display: grid;
  box-sizing: border-box;
  padding: 6px 16px;
  column-gap: 20px;
  row-gap: 20px;
  background: white;
  border-radius: 12px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  color: #333;
}

.mine-content-left-bottom-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.mine-content-left-bottom-item-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.mine-content-right {
  width: 1168px;
}
</style>
